<template>
	<view class="box">
		<view class="top_wrapper hidden bg_fff">
			<view class="top bg_f5 flex3">
				<image src="../../static/image/index/b.png"></image>
				<view class="w_flex1">
					<van-field placeholder="输入城市名" placeholder-style="color: #acacac" class="font_31" clearable
						@input="get_search" @clear="get_clear" />
				</view>
			</view>
		</view>
		<view class="anchor">
			<view>
				<view class="font_27 color_999 top_title">{{top_title}}</view>
				<view class="block_wrapper flex1">
					<view class="block font_31" v-for="item in top_list" :key="item.id" @click="get_map(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view v-if="hot_show">
				<van-index-bar :sticky="false" :index-list="letter_list" highlight-color="#FF6A00">
					<view v-for="item in city_list" :key="item.title">
						<van-index-anchor :index="item.title" />
						<view class="anchor_list">
							<van-cell :title="itemData.name" v-for="itemData in item.data" :key="itemData"
								@click="get_map(itemData)" />
						</view>
					</view>
				</van-index-bar>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				area: false,
				from: false,
				top_title: '',
				top_list: [],
				hot_list: [], // 热门
				city_list: [], // 城市
				letter_list: [], // 字母
				search_list: [], // 搜索
				hot_show: null, // 是否显示热门
			}
		},
		onLoad(e) {
			this.get_hot();
			this.get_city_data();

			if (e.from) {
				// 地图页面进入
				this.from = true;
			}

			if (e.area) {
				// 热门地区页面进入
				this.area = true;
			}
		},
		onUnload(e) {
			if (this.from) {
				uni.reLaunch({
					url: './index'
				})

				return true;
			}
		},
		methods: {
			// 热门城市点击
			get_map(e) {
				let self = this;
				let city_data = {
					cityId: e.id,
					city: e.name,
					latitude: null,
					longitude: null
				}

				getApp().get_name_l_l(e.name + '人民政府', function(res) {
					city_data.latitude = res.result.location.lat;
					city_data.longitude = res.result.location.lng;

					uni.setStorageSync('cityData', city_data);
					uni.removeStorageSync('hotArea'); // 热门地区

					if (self.area && !self.from) {
						uni.navigateBack();
						return
					}

					if (self.area && self.from) {
						uni.navigateTo({
							url: './search?show=true'
						})
						return
					}

					getApp().get_navigate_url('./map?type=city');
				})
			},
			// 热门城市
			get_hot() {
				this.$http.get(this.$api.getHotRegionName).then(res => {
					this.hot_list = res.data;

					this.hot_show = true;
					this.top_title = '热门城市';
					this.top_list = this.hot_list;
				})
			},
			// 城市列表
			get_city_data() {
				this.$http.get(this.$api.getRegionList).then(res => {
					let json = res.data;
					let array = [];
					let letter = [];

					for (let i in json) {
						array.push({
							title: i,
							data: json[i]
						})

						letter.push(i)
					}

					this.city_list = array;
					this.letter_list = letter;
				})
			},
			// 搜索
			get_search(e) {
				if (e.detail) {
					this.$http.get(this.$api.search, {
						name: e.detail
					}).then(res => {
						this.search_list = res.data;

						this.hot_show = false;
						this.top_title = '搜索结果';
						this.top_list = this.search_list;
					})
				}

				if (!e.detail) {
					this.hot_show = true;
					this.top_title = '热门城市';
					this.top_list = this.hot_list;
				}
			},
			get_clear() {
				this.hot_show = true;
				this.top_title = '热门城市';
				this.top_list = this.hot_list;
			}
		}
	}
</script>

<style lang="less">
	.box {
		// padding: 118rpx 0 0;
	}

	.top {
		height: 62rpx;
		width: 704rpx;
		padding: 0 23rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		margin: 12rpx auto 44rpx;

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 10rpx;
		}

		input {
			flex: 1;
		}
	}

	.top_wrapper {
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		// position: fixed;
	}

	.top_title {
		margin-bottom: 37rpx;
		padding-left: 23rpx;
	}

	.block_wrapper {
		padding: 0 15rpx;
		flex-wrap: wrap;
	}

	.block {
		margin: 0 8rpx 15rpx;
		padding: 10rpx 31rpx;
		border-radius: 10rpx;
		border: 1px solid #DDDDDD;
	}

	.wrapper {
		padding: 0 0 0 23rpx;

		.list {
			padding: 31rpx 0;
			border-bottom: 1px solid #EEEEEE;
		}
	}

	.anchor /deep/ .van-index-anchor {
		padding: 0 23rpx;
		font-weight: bold;
		margin: 31rpx 0 6rpx;
		line-height: var(--index-anchor-line-height, 38rpx);
	}

	/deep/ .van-index-anchor-wrapper {
		overflow: hidden;
	}

	.anchor_list {
		padding-left: 23rpx;
	}

	.anchor /deep/ .van-index-bar__sidebar {
		color: #999;
	}

	.anchor /deep/ .van-cell {
		padding: 31rpx 0;
		font-weight: bold;
		font-size: 27rpx;
		line-height: 38rpx;

		&::after {
			left: 0;
			border-color: #EEEEEE;
		}
	}

	.top /deep/ .van-cell {
		padding: 0;
		background-color: transparent;
	}
</style>
